<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".car-img").click(function() {
			var offset = $(this).offset();
			var p = $(window).scrollTop();
			$(".alert-form-box").css("top", offset.top - 100 - p);
			$('#alertModal').modal('show');
		})

		$(".alert-item:eq(0)").click(function() {
			location.href = 'DailyLease.html';
		})
		$(".alert-item:not(:first)").click(function() {
			$('#myModal').modal({
				backdrop : "static"
			})
		})

		$("#closeModal").click(function() {
			$('#myModal').modal('hide');
		})

	})
	function other(otherplaces,average,amt,cartypename) {
		
		window.location.href="../OtherplacesServlet?otherplaces"+otherplaces+"&cartypename"+cartypename+"average"+average+"&amt="+amt;
	}
	
</script>
<title>选择车型</title>
</head>
<body>
	<div class="main-box" style="padding-top: 200px;">
		<div class="navbar-fixed-top">
			<div class="nav-box">
				<div class="nav-left">
					<a href="CityTime.jsp"><img src="images/btn_back.png"
						height="40"></a>
				</div>
				<div class="nav-center">选择车型</div>
				<div class="nav-right">&nbsp;</div>
				<div class="clear"></div>
			</div>
			<div class="orderCarTime-box">
				<dl>
					<dt>
						<img src="images/icon_take.png" width="20">
					</dt>
					<dd>${cityName}${beginTime}</dd>
				</dl>
				<div class="clear"></div>
				<dl>
					<dt>
						<img src="images/icon_return.png" width="20">
					</dt>
					<dd>${cityName}${endTime}</dd>
				</dl>
				<div class="clear"></div>
				<div class="small-icon">
					<div>
						<img src="images/t1.png" width="16" height="16"> 含基本险
					</div>
					<div>
						<img src="images/t3.png" width="16" height="16"> 不限里程
					</div>
				</div>
			</div>
			<div class="cartype-title-box">
				<div class="cartype-title-left">
					<img src="images/cartype_title_left.png" width="167" height="40">
				</div>
				<div class="cartype-title-right">
					<img src="images/cartype_title_right.png" width="134" height="40">
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<ul class="cartype-list">
			<c:if test="${not empty carList }">
				<c:forEach var="car" items="${carList}">
					<c:choose>
						<c:when test="${car.iscan=='False' }">
							<li>
								<div class="car-img">
									<img src="${car.img }" width="100">
									<div class="rent">
										<img src="images/rent.png" width="76">
									</div>
								</div>
								<div class="car-desc">
									<div class="car-name">${car.cartypename}</div>
									<div class="car-author">${car.isSpecialsnm }</div>
									<div class="car-text">${car.gearsname}/${car.wingnumname }/${car.seatname}</div>
								</div>
								<div class="car-order">
									<div class="car-price">￥${car.amt}</div>
									<c:choose>
										<c:when test="${car.otherplacescnt != 0 }">
											<div >
											<a href="ChangeCarShop.jsp?otherplaces=${car.otherplaces}&average=${car.average}&amt=${car.amt}&cartypename=${car.cartypename }">
											<img
													src="images/full.png" height="30"></a>
											</div>
										</c:when>
										<c:otherwise>
											<div>
												<img src="images/full.png" height="30">
											</div>
										</c:otherwise>
									</c:choose>
									<div>还有${car.otherplacescnt }家门店</div>
								</div>
								<div class="clear"></div>
								<hr class="line" />
							</li>
						</c:when>
						<c:when test="${car.iscan=='True' }">
							<li>
								<div class="car-img">
									<img src="${car.img }" width="100">
									<div class="rent">
										<img src="images/rent.png" width="76">
									</div>
								</div>
								<div class="car-desc">
									<div class="car-name">${car.cartypename}</div>
									<div class="car-author">${car.isSpecialsnm }</div>
									<div class="car-text">${car.gearsname}/${car.wingnumname }/${car.seatname}</div>
								</div>
								<div class="car-order">
									<div class="car-price">￥${car.amt}</div>
									<div>
										<a href="Favorable.html"><img src="images/order.png"
											height="30"></a>
									</div>
								</div>
								<div class="clear"></div>
								<hr class="line" />
							</li>
						</c:when>
					</c:choose>
				</c:forEach>
			</c:if>
		</ul>
	</div>
	<!--弹出框-->
	<div class="modal fade" id="alertModal">
		<div class="alert-form-box">
			<div class="alert-item">
				<div class="img">
					<img src="images/calendar2.png" width="30" />
				</div>
				<div class="text">
					&nbsp;<br />每日租金
				</div>
			</div>
			<div class="alert-item">
				<div class="img">
					<img src="images/gift.png" width="30" />
				</div>
				<div class="text">
					5天<br />以上更优惠
				</div>
			</div>
			<div class="alert-item">
				<div class="img">
					<img src="images/gift.png" width="30" />
				</div>
				<div class="text">
					15天<br />以上更优惠
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal">
		<div class="alert-box">
			<div class="alert-title">优惠信息</div>
			<div class="alert-content">
				<div class="alert-img">
					<img src="images/gift.png" width="60" height="59" />
				</div>
				<div class="alert-msg">
					<span style="color: #ff0000;">5</span>天以上价格，立减<span
						style="color: #ff0000;">8</span>元/天
				</div>
				<div class="alert-button" id="closeModal">返 回</div>

			</div>
		</div>
	</div>
	<!--弹出框结束-->

</body>
</html>